// 变量
// 变量的作用：方便复用，易于修改
// 定义变量：@变量名:值;
// 使用变量：@变量名;
@color1: red;
@color2: blue;
.box1{
    font-size: 20px;
    color: @color1;
}
.box2{
    @color3: green;
    font-size: 22px;
    color: @color2;
}
.box3{
    font-size: 24px;
    // color: @color3; 不能使用定义在其他选择器中的局部变量
}

// 使用变量作为选择器或属性名
// 字符串插值：@{变量名} 向字符串中插入变量的值
@a1: box3;
@a2: color;
.@{a1}{
    font-size: 26px;
    background-@{a2}: pink;
}

// 使用变量保存公共路径
@url: './images/contents/';
.box4{
    width: 200px;
    height: 100px;
    // background-image: url('./images/contents/b1.jpg');
    background-image: url('@{url}b1.jpg');
}
.box5{
    width: 200px;
    height: 100px;
    // background-image: url('./images/contents/b2.jpg');
    background-image: url('@{url}b2.jpg');
}
.box6{
    width: 200px;
    height: 100px;
    // background-image: url('./images/contents/b3.jpg');
    background-image: url('@{url}b3.jpg');
}

// 使用变量的值来引用变量
@con: 'hello tony';
@abc: 'con';
.box7::after{
    content: @@abc;
}

// less中的变量是延迟加载的
.box8{
    width: @w;
    height: @h;
    background-color: @bg;
}
@w: 200px;
@h: 100px;
@bg: blue;
